<div [@routerTransition]>
  <div class="m-subheader ">
    <div class="d-flex align-items-center">
      <div class="mr-auto col-xs-6">
        <h3 class="m-subheader__title m-subheader__title--separator">
          <span>存放位置</span>
        </h3>
        <span class="m-section__sub"> 存放位置的文本头信息 </span>
      </div>
      <div class="col-xs-6 text-right"></div>
    </div>
  </div>

  <div class="m-content">
    <div class="row">
      <div class="col-md-4">
        <div class="m-portlet m-portlet--mobile">
          <div class="m-portlet__head">
            <div class="m-portlet__head-caption">
              <div class="m-portlet__head-title">
                <h3 class="m-portlet__head-text">区域管理</h3>
              </div>
            </div>
            <div class="m-portlet__head-tools">
              <button
                *ngIf="isGranted('Pages.Material.Location.Operation')"
                (click)="createOrEditLocationModal.show(1)"
                class="btn btn-primary"
              >
                <i class="fa fa-plus"></i> 添加区域
              </button>
            </div>
          </div>
          <div class="m-portlet__body">
            <div class="row align-items-center">
              <!-- <Primeng-TurboTable-Start> -->
              <div
                class="primeng-datatable-container"
                [busyIf]="primengTableHelper.isLoading"
              >
                <p-table
                  #dataTable
                  [value]="areas"
                  rows="100"
                  [paginator]="false"
                  [scrollable]="true"
                  ScrollWidth="100%"
                  selectionMode="single"
                  [(selection)]="selectedArea"
                  [metaKeySelection]="true"
                  dataKey="id"
                  (onRowSelect)="areaChange($event)"
                  [responsive]="primengTableHelper.isResponsive"
                  [resizableColumns]="primengTableHelper.resizableColumns"
                >
                  <ng-template pTemplate="header">
                    <tr>
                      <th
                        style="width: 130px"
                        [hidden]="
                          !isGrantedAny('Pages.Material.Location.Operation')
                        "
                      >
                        {{ l("Actions") }}
                      </th>
                      <th style="width: 100px">名称</th>
                      <th style="width: 100px">编码</th>
                      <th style="width: 150px">描述</th>
                    </tr>
                  </ng-template>
                  <ng-template pTemplate="body" let-record="$implicit">
                    <tr [pSelectableRow]="record">
                      <td
                        style="width: 130px"
                        [hidden]="
                          !isGrantedAny('Pages.Material.Location.Operation')
                        "
                      >
                        <div class="btn-group dropdown" normalizePosition>
                          <button
                            class="dropdown-toggle btn btn-sm btn-primary"
                            data-toggle="dropdown"
                            aria-haspopup="true"
                            aria-expanded="false"
                          >
                            <i class="fa fa-cog"></i
                            ><span class="caret"></span> {{ l("Actions") }}
                          </button>
                          <ul class="dropdown-menu">
                            <li>
                              <a
                                (click)="
                                  createOrEditLocationModal.show(
                                    1,
                                    0,
                                    record.id
                                  )
                                "
                                >{{ l("Edit") }}</a
                              >
                            </li>
                            <li>
                              <a (click)="deleteLocation(1, record)">{{
                                l("Delete")
                              }}</a>
                            </li>
                          </ul>
                        </div>
                      </td>
                      <th style="width: 100px">{{ record.name }}</th>
                      <th style="width: 100px">{{ record.code }}</th>
                      <th style="width: 150px">{{ record.description }}</th>
                    </tr>
                  </ng-template>
                </p-table>
              </div>
              <!-- <Primeng-TurboTable-End> -->
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="m-portlet m-portlet--mobile">
          <div class="m-portlet__head">
            <div class="m-portlet__head-caption">
              <div class="m-portlet__head-title">
                <h3 class="m-portlet__head-text">货架管理</h3>
              </div>
            </div>
            <div class="m-portlet__head-tools">
              <button
                *ngIf="isGranted('Pages.Material.Location.Operation')"
                (click)="createOrEditLocationModal.show(2, id1)"
                class="btn btn-primary"
              >
                <i class="fa fa-plus"></i>添加货架
              </button>
            </div>
          </div>
          <div class="m-portlet__body">
            <div class="row align-items-center">
              <!-- <Primeng-TurboTable-Start> -->
              <div
                class="primeng-datatable-container"
                [busyIf]="primengTableHelper.isLoading"
              >
                <p-table
                  #dataTable
                  [value]="shelfs"
                  rows="100"
                  [paginator]="false"
                  [scrollable]="true"
                  ScrollWidth="100%"
                  selectionMode="single"
                  [(selection)]="selectedShelf"
                  [metaKeySelection]="true"
                  dataKey="id"
                  (onRowSelect)="shelfChange($event)"
                  [responsive]="primengTableHelper.isResponsive"
                  [resizableColumns]="primengTableHelper.resizableColumns"
                >
                  <ng-template pTemplate="header">
                    <tr>
                      <th
                        style="width: 130px"
                        [hidden]="
                          !isGrantedAny('Pages.Material.Location.Operation')
                        "
                      >
                        {{ l("Actions") }}
                      </th>
                      <th style="width: 100px">名称</th>
                      <th style="width: 100px">编码</th>
                      <th style="width: 150px">描述</th>
                    </tr>
                  </ng-template>
                  <ng-template pTemplate="body" let-record="$implicit">
                    <tr [pSelectableRow]="record">
                      <td
                        style="width: 130px"
                        [hidden]="
                          !isGrantedAny('Pages.Material.Location.Operation')
                        "
                      >
                        <div class="btn-group dropdown" normalizePosition>
                          <button
                            class="dropdown-toggle btn btn-sm btn-primary"
                            data-toggle="dropdown"
                            aria-haspopup="true"
                            aria-expanded="false"
                          >
                            <i class="fa fa-cog"></i
                            ><span class="caret"></span> {{ l("Actions") }}
                          </button>
                          <ul class="dropdown-menu">
                            <li>
                              <a
                                (click)="
                                  createOrEditLocationModal.show(
                                    2,
                                    id1,
                                    record.id
                                  )
                                "
                                >{{ l("Edit") }}</a
                              >
                            </li>
                            <li>
                              <a (click)="deleteLocation(2, record)">{{
                                l("Delete")
                              }}</a>
                            </li>
                          </ul>
                        </div>
                      </td>
                      <th style="width: 100px">{{ record.name }}</th>
                      <th style="width: 100px">{{ record.code }}</th>
                      <th style="width: 150px">{{ record.description }}</th>
                    </tr>
                  </ng-template>
                </p-table>
              </div>
              <!-- <Primeng-TurboTable-End> -->
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="m-portlet m-portlet--mobile">
          <div class="m-portlet__head">
            <div class="m-portlet__head-caption">
              <div class="m-portlet__head-title">
                <h3 class="m-portlet__head-text">位置管理</h3>
              </div>
            </div>
            <div class="m-portlet__head-tools">
              <button
                *ngIf="isGranted('Pages.Material.Location.Operation')"
                (click)="createOrEditLocationModal.show(3, id2)"
                class="btn btn-primary"
              >
                <i class="fa fa-plus"></i>添加位置
              </button>
            </div>
          </div>
          <div class="m-portlet__body">
            <div class="row align-items-center">
              <!-- <Primeng-TurboTable-Start> -->
              <div
                class="primeng-datatable-container"
                [busyIf]="primengTableHelper.isLoading"
              >
                <p-table
                  #dataTable
                  [value]="positions"
                  rows="100"
                  [paginator]="false"
                  [scrollable]="true"
                  ScrollWidth="100%"
                  [responsive]="primengTableHelper.isResponsive"
                  [resizableColumns]="primengTableHelper.resizableColumns"
                >
                  <ng-template pTemplate="header">
                    <tr>
                      <th
                        style="width: 130px"
                        [hidden]="
                          !isGrantedAny('Pages.Material.Location.Operation')
                        "
                      >
                        {{ l("Actions") }}
                      </th>
                      <th style="width: 100px">名称</th>
                      <th style="width: 100px">编码</th>
                      <th style="width: 150px">描述</th>
                    </tr>
                  </ng-template>
                  <ng-template pTemplate="body" let-record="$implicit">
                    <tr>
                      <td
                        style="width: 130px"
                        [hidden]="
                          !isGrantedAny('Pages.Material.Location.Operation')
                        "
                      >
                        <div class="btn-group dropdown" normalizePosition>
                          <button
                            class="dropdown-toggle btn btn-sm btn-primary"
                            data-toggle="dropdown"
                            aria-haspopup="true"
                            aria-expanded="false"
                          >
                            <i class="fa fa-cog"></i
                            ><span class="caret"></span> {{ l("Actions") }}
                          </button>
                          <ul class="dropdown-menu">
                            <li>
                              <a
                                (click)="
                                  createOrEditLocationModal.show(
                                    3,
                                    id2,
                                    record.id
                                  )
                                "
                                >{{ l("Edit") }}</a
                              >
                            </li>
                            <li>
                              <a (click)="deleteLocation(3, record)">{{
                                l("Delete")
                              }}</a>
                            </li>
                          </ul>
                        </div>
                      </td>
                      <th style="width: 100px">{{ record.name }}</th>
                      <th style="width: 100px">{{ record.code }}</th>
                      <th style="width: 150px">{{ record.description }}</th>
                    </tr>
                  </ng-template>
                </p-table>
              </div>
              <!-- <Primeng-TurboTable-End> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <createOrEditLocationModal
    #createOrEditLocationModal
    (modalSave)="reloadPage($event)"
  ></createOrEditLocationModal>
</div>
